<template>
  <div class="dragover-overlay">
    <div class="lottie_container"
         ref="lottieRef"></div>
  </div>
</template>

<script>
import lottie from 'lottie-web'
export default {
  name: 'DragoverOverlay',
  props: {
    step: {
      type: Number,
      default: 0 // 0: 准备接受文件，1: 解析中
    },
    files: {
      type: Array,
      default () {
        return []
      }
    },
    accept: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      lottieAni: null,
      percent: 0,
      status: 0,
      progressInterval: null,
      dropedFiles: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      bbtools.on('drop-file-bbc-response', this.dropFileBbcResponse)
    })

    this.initLottieAni()
  },
  destroyed () {
    bbtools.removeListener('drop-file-bbc-response', this.dropFileBbcResponse)
  },
  watch: {
    step: {
      immediate: true,
      handler (val) {
        this.status = val
      }
    },
    files: {
      immediate: true,
      handler (val) {
        this.dropedFiles = val.filter(item => this.accept.split(';').some(itm => item.endsWith('.' + itm)))
      }
    }
  },
  methods: {
    initLottieAni () {
      this.$nextTick(() => {
        this.lottieAni = lottie.loadAnimation({
          container: this.$refs.lottieRef,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: require('../../../assets/lottie/drag-drop.json')
        })
        this.lottieAni.addEventListener('DOMLoaded', (e) => {
          this.lottieAni.setSpeed(0.5)
          this.lottieAni.playSegments([0, 31], false)
          this.lottieAni.setDirection(-1)
        })
        this.lottieAni.addEventListener('enterFrame', (e) => {
          if (this.status == 1) {
            if (this.dropedFiles.length < 1) {
              this.lottieAni.loop = false
              this.lottieAni.setSpeed(1)
              this.lottieAni.setDirection(1)
              this.lottieAni.playSegments([0, 58], false)
              if (parseInt(e.currentTime) == 48) {
                this.lottieAni.pause()
                this.$emit('hide')
                this.lottieAni.destroy()
              }
            } else {
              if (parseInt(e.currentTime) == 30) {
                this.lottieAni.loop = false
                this.lottieAni.setSpeed(1)
                this.lottieAni.setDirection(1)
                this.lottieAni.playSegments([31, 103], false)
              }
              if (parseInt(e.currentTime) == 67) {
                this.$emit('hide')
                this.lottieAni.destroy()
              }
            }
          }
        })
        this.lottieAni.addEventListener('destroy', (e) => {
          if (this.dropedFiles.length < 1) {
            this.$Message.error({
              content: `未发现 ${this.accept.toUpperCase()} 格式的文件`,
              duration: 5
            })
          } else {
            bbtools.send('drop-file', {
              path: this.dropedFiles[0]
            })
          }
        })

      })
    },
    dropFileBbcResponse (event, response) {
      this.$emit('response', response)
    }
  }
}
</script>

<style lang="less" scoped>
.dragover-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .lottie_container {
    width: 180px;
    height: 180px;
  }
}
</style>